<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }
        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function() {
            // 原理：根据按键不同 实现 不同的效果
            $("body").keydown(function (event) {
                // alert(123);
                // console.log(event);
                // keyCode 就是获取到按键便是的值
                var code = event.keyCode; //
                // console.log(code);
                switch (code) {
                    case 82:
                        $("#bgChange").css("background-color", "red");
                        $("#keyCodeSpan").text(code);
                        break;
                    default :
                        //#00BCD4
                        $("#bgChange").css("background-color", "#00BCD4");
                        $("#keyCodeSpan").text(code);
                        break;
                }
            });
        });
    </script>
</head>

<body>
<div class="wrap">
    <h1>按键改变颜色</h1>
    <div id="bgChange">keyCode为：<span id="keyCodeSpan"></span></div>
</div>
</body>
</html>
